<template>
  <div class="item-card">
    <el-form label-width="80px" size="small">
      <el-popover
        placement="left"
        title="转换说明"
        width="200"
        trigger="hover"
        content="Cesium.Cartesian3.fromDegrees(longitude, latitude, height)">
        <div>参数：viewer, Cesium</div>
        <div>结果：this.log = x</div>
        <h5 slot="reference" class="item-title">控制台<i class="el-icon-question"></i></h5>
      </el-popover>
      <el-input v-model="form.code" placeholder="请输入代码" type="textarea" rows="8"></el-input>
      <div class="text-right item-transform">
        <el-button @click="run" type="primary" size="mini">执行</el-button>
      </div>
      <el-input v-model="log" placeholder="执行结果" type="textarea" rows="8"></el-input>
    </el-form>
  </div>
</template>

<script>
import * as Cesium from 'cesium'

export default {
  name: 'tool-console',

  props: {
    viewer: {
      type: Object,
      default () {
        return null
      }
    }
  },

  data () {
    return {
      form: {
        code: 'let cartesian3 = Cesium.Cartesian3.fromDegrees(116.3905, 39.9084, 1400000);this.log = cartesian3.x + "," + cartesian3.x + "," + cartesian3.x'
      },
      log: ''
    }
  },

  methods: {
    run () {
      let code = this.form.code
      try {
        let func = new Function('viewer', 'Cesium', code)
        func.call(this, this.viewer, Cesium)
        this.$message({
          message: '执行成功',
          type: 'success'
        })
      } catch(e) {
        this.$message({
          message: '执行失败',
          type: 'error'
        })
      }
    }
  }
}
</script>

<style lang="less">
.item-card {
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.item-transform {
  margin-top: 8px;
  margin-bottom: 8px;
}
.item-title {
  margin: 0;
  padding: 0 0 8px;
}
</style>
